<template>
  <layout>
    <!-- 第一列 -->
    <div class="lgbox lgbox1">
      <div class="box box1">
        <LeftOne />
      </div>
      <div class="box box2">
        <LeftTwo />
      </div>
      <div class="box box3">
        <LeftThree />
      </div>
      <div class="box box4">
        <LeftFour />
      </div>
    </div>

    <!-- 第二列-->
    <div class="maplayer">
      <CenterEarth />
    </div>
    <!-- 第三列 -->
    <div class="lgbox lgbox3">
      <div class="box box5">
        <RightOne />
      </div>

      <div class="box box6">
        <RightTwo />
      </div>
      <div class="box box7">
        <RightThree />
      </div>
      <div class="box box8">
        <RightFour />
      </div>
    </div>
    <div
      v-if="carShowInfo.isshow"
      :style="{
        position: 'absolute',
        left: carShowInfo.clientX + 'px',
        top: carShowInfo.clientY + 'px',
      }"
      class="carshowbox"
    >
      <div class="showline showline1">
        <div class="item">{{ carShowInfo.name }}</div>
        <div class="item item2">{{ carShowInfo.value }}{{ carShowInfo.unit }}</div>
      </div>
      <div class="showline showline2">
        <div class="item">WTA排名:</div>
        <div class="item item2">{{ carShowInfo.percent }}</div>
      </div>
    </div>
  </layout>
</template>

<script lang="ts" setup>
  import { provide, reactive } from 'vue';
  import layout from '@/components/layout/index.vue';
  import LeftOne from './left-one.vue';
  import LeftThree from './left-three.vue';
  import LeftTwo from './left-two.vue';
  import LeftFour from './left-four.vue';
  import CenterEarth from './center-earth.vue';
  import RightOne from './right-one.vue';
  import RightTwo from './right-two.vue';
  import RightThree from './right-three.vue';
  import RightFour from './right-four.vue';

  let carShowInfo = reactive({
    isshow: false,
    name: '',
    value: '' as string | number,
    percent: '' as string | number,
    clientX: 0,
    clientY: 0,
    unit: '',
  });
  let updateCarStats = (params: any) => {
    carShowInfo.isshow = params.isshow;
    carShowInfo.name = params.name + (['国产', '进口'].includes(params.name) ? '' : ':');
    carShowInfo.value = params.value;
    carShowInfo.percent = params.percent;
    carShowInfo.clientX = params.clientX;
    carShowInfo.clientY = params.clientY;
    carShowInfo.unit = params.unit;
  };

  provide('updateCarStats', updateCarStats);
</script>
<style lang="scss" scoped>
  .maplayer {
    position: absolute;

    z-index: 1;
    height: 100%;
    width: 100%;
    padding-left: 27%;
    padding-right: 27%;
    overflow: hidden;
  }

  .lgbox1 {
    width: 26%;
    overflow: hidden;
    position: absolute;
    top: 112px;
    left: 18px;
    z-index: 200;
    height: 100%;
    .box1 {
      height: 23%;
      min-height: 220px;
    }

    .box2 {
      min-height: 220px;
      height: 22%;
      margin-top: 14px;
    }

    .box3 {
      min-height: 100px;
      height: 20%;
      margin-top: 14px;
    }

    .box4 {
      height: 18%;
      margin-top: 14px;
      min-height: 120px;
    }
  }

  .lgbox3 {
    width: 26%;
    top: 112px;
    right: 18px;
    z-index: 200;
    overflow: hidden;
    position: absolute;
    height: 100%;
    .wbox {
      height: 36px;
    }

    .box5 {
      height: 23%;
      min-height: 230px;
    }

    .box6 {
      height: 24%;
      min-height: 230px;
      margin-top: 14px;
    }

    .box7 {
      min-height: 180px;
      height: 18%;
      margin-top: 14px;
    }

    .box8 {
      height: 18%;
      margin-top: 14px;
      min-height: 100px;
    }
  }

  .carshowbox {
    height: 92px;
    width: 220px;
    position: absolute;
    z-index: 200;

    background: url('@/assets/img/img3.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .showline {
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;

      .item {
        width: 50%;
        float: left;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 700;
        color: #cccccc;
        line-height: 22px;
      }

      .item2 {
        color: #5accfc;
      }
    }

    .showline1 {
      margin-top: 24px;
    }

    .showline2 {
      margin-top: 8px;
    }
  }
</style>
